Skip to content

fix: 감상평 가이드 버튼이 키보드에 가려지는 문제 해결#159

Merged
seoyoon513 merged 3 commits intodevelopfrom
BOOK-288-fix/#158
Aug 21, 2025
Merged

fix: 감상평 가이드 버튼이 키보드에 가려지는 문제 해결#159
seoyoon513 merged 3 commits intodevelopfrom
BOOK-288-fix/#158

Conversation

@seoyoon513
Copy link
Copy Markdown
Contributor

@seoyoon513 seoyoon513 commented Aug 21, 2025

🔗 관련 이슈

📙 작업 설명

  • 작성한 감상평 없을 때 키보드 자동으로 올라오는 부분 제거
  • 간헐적으로 감상평 가이드 키보드에 가려지는 문제 해결

🧪 테스트 내역

  • 주요 기능 정상 동작 확인
  • 브라우저/기기에서 동작 확인
  • 엣지 케이스 테스트 완료
  • 기존 기능 영향 없음

💬 추가 설명 or 리뷰 포인트

  • 이전에는 UX를 고려하여 감상평 가이드 진입 시 키보드가 바로 올라오게 구현했으나, 감상평가이드 버튼과 다음 버튼이 밀려올라오면서 상단의 title과 description이 잘리는 문제 발생 -> 사용자가 textField 터치 시 올라도록 변경했습니다.

Summary by CodeRabbit

  • Bug Fixes
    • 초기 진입 시 키보드가 자동으로 열리던 현상 제거
    • 빈 입력란 자동 포커스를 제거해 의도치 않은 스크롤/입력 방지
  • Style
    • 입력 영역 하단 여백을 12dp에서 16dp로 확대해 가독성 개선
    • 키보드 표시 시 화면 스크롤 타이밍을 미세 조정하여 전환을 더욱 부드럽게 개선

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Aug 21, 2025

Walkthrough

ImpressionStep에서 초기 포커스/키보드 자동 표시 로직을 제거하고, bring-into-view 지연을 100ms→150ms로 조정했으며, 내부 컬럼 하단 패딩을 12dp→16dp로 변경했습니다. 공개 API 시그니처 변경은 없습니다.

Changes

Cohort / File(s) Summary of Changes
ImpressionStep UI 입력 동작 조정
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt
키보드 컨트롤러 의존 및 초기 자동 포커스 제거, bring-into-view 지연 150ms로 조정, 내부 컬럼 bottom 패딩 16dp로 변경

Sequence Diagram(s)

sequenceDiagram
    actor User as 사용자
    participant UI as ImpressionStep
    participant KB as 소프트 키보드
    participant BIV as BringIntoView

    Note over UI: 초기 자동 포커스/자동 키보드 표시 제거됨
    User->>UI: 텍스트 필드 탭(포커스)
    UI-->>KB: 키보드 표시(시스템에 의해)
    UI->>BIV: 지연 150ms 후 bring-into-view 요청
    BIV-->>UI: 스크롤/레이아웃 조정
    Note over UI: 버튼 등 하단 요소 가려짐 완화(패딩 + BIV 타이밍)
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective Addressed Explanation
감상평 가이드 버튼이 키보드에 가려지는 문제 해결 (#158) 버튼 노출 보장 여부와 특정 뷰 대상 BIV 적용 여부 확인 불가. 가이드 버튼에 대한 명시적 처리 변경 없음.

Poem

작은 발로 톡톡, 키보드 문 살짝 열고,
나는 토끼 개발자, 패딩을 포근히 덧대요.
150ms 숨 고르고, 뷰를 살며시 들어 올려,
가이드 버튼 반짝! 이제 안 가려져요.
깡총깡총, 버그야 안녕!

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch BOOK-288-fix/#158

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions Bot added the 🐞 fix Something isn't working label Aug 21, 2025
@github-actions github-actions Bot requested a review from easyhooon August 21, 2025 18:09
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (4)
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt (4)

73-77: 하드코딩된 150ms 지연 대신 프레임/인셋 신호 기반으로 전환 고려

지연값을 100→150ms로 늘린 것은 증상 완화에 도움이 되지만, IME 애니메이션 시간은 OEM/IME마다 상이해 하드코딩 지연은 여전히 간헐적 실패 여지가 있습니다. 프레임 동기화 또는 인셋 가시화 신호를 활용하면 더 견고합니다. 최소한 지연값을 의미 있는 상수로 추출해 관리 가능성을 높이는 것을 권장합니다.

  • 옵션 A(간단): 의미 있는 상수로 추출
-            delay(150)
+            delay(IME_RELOCATION_DELAY_MS)

아래 상수 선언을 파일 상단(함수 바깥) 등에 추가:

private const val IME_RELOCATION_DELAY_MS = 150L
  • 옵션 B(권장): 프레임 1~2회 동기화 후 호출
-            delay(150)
-            bringIntoViewRequester.bringIntoView()
+            withFrameNanos { /* 1st frame after IME starts animating */ }
+            withFrameNanos { /* 2nd frame to ensure insets are applied */ }
+            bringIntoViewRequester.bringIntoView()

검증 제안:

  • 삼성/픽셀/샤오미 등 주요 OEM, 제스처/3버튼 내비게이션, 세로/가로, 다양한 IME(네이버/구글/삼성)에서 가이드 버튼이 매번 1st-try로 가려지지 않는지 확인 바랍니다.

87-93: 하단 패딩 16.dp → 디자인 토큰 사용으로 일관성 유지 제안

하단 여백을 늘린 조정은 긍정적입니다. 다만 하드코딩된 16.dp 대신 테마 토큰 사용을 권장합니다(디자인 일관성, 다크/다국어/디바이스 스케일 대응 용이).

-                .padding(bottom = 16.dp)
+                .padding(bottom = ReedTheme.spacing.spacing4) // spacing4가 16dp와 동일한지 확인

Note: spacing4가 16dp가 아닐 경우, 동일 값에 해당하는 토큰으로 교체 부탁드립니다.


31-33: 현재 포커싱 자동 동작 제거에 따라 FocusRequester는 미사용 — 정리 권장

자동 포커싱/키보드 표시 로직을 제거하면서 FocusRequester를 생성/부착만 하고 실제로 사용(예: requestFocus())하지 않습니다. 혼선을 줄이기 위해 관련 코드를 정리하면 좋겠습니다.

- import androidx.compose.ui.focus.FocusRequester
- import androidx.compose.ui.focus.focusRequester
  import androidx.compose.ui.focus.onFocusChanged
-    val focusRequester = remember { FocusRequester() }
                 modifier = Modifier
                     .fillMaxWidth()
-                    .focusRequester(focusRequester)
                     .height(140.dp)
                     .onFocusChanged { focusState ->
                         isImpressionTextFieldFocused = focusState.isFocused
                     },

Also applies to: 67-68, 109-115


143-146: leadingIcon은 보조적 요소이므로 contentDescription을 null로 설정 권장

버튼의 접근성 라벨은 텍스트로 충분히 전달됩니다. 아이콘에 별도 contentDescription을 주면 스크린리더에서 중복 낭독될 수 있습니다. 장식 목적이면 null이 바람직하고, 별도 설명이 필요하다면 stringResource로 현지화된 문자열을 사용해 주세요.

-                            contentDescription = "Impression Guide Icon",
+                            contentDescription = null,

대안(현지화 필요 시):

contentDescription = stringResource(R.string.impression_guide_icon_description)
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between f01d86f and cd59711.

📒 Files selected for processing (1)
  • feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt (2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#46
File: feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/component/InfiniteLazyColumn.kt:83-95
Timestamp: 2025-07-14T00:46:03.843Z
Learning: seoyoon513과 팀은 한국어 주석을 선호하며, 한국어 주석을 영어로 번역하라는 제안을 하지 않아야 함
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: ci-build
🔇 Additional comments (1)
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt (1)

59-72: PR 목표 달성 확인: 자동 키보드 표시 제거 및 가려짐 완화 흐름 정돈

  • 초기 자동 포커스/키보드 표시 제거로 진입 시 레이아웃 밀림 이슈가 해소된 점 👍
  • 키보드 가시화 + 텍스트필드 포커스일 때 가이드 버튼을 bringIntoView로 보장하는 흐름이 PR 의도와 부합합니다.

Copy link
Copy Markdown
Contributor

@easyhooon easyhooon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사용자가 터치시 키보드 올라오게 <- 좋습니다

# Conflicts:
#	feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt
@seoyoon513 seoyoon513 merged commit 5a0aa4a into develop Aug 21, 2025
2 checks passed
@seoyoon513 seoyoon513 deleted the BOOK-288-fix/#158 branch August 21, 2025 18:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐞 fix Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BOOK-288/fix] 감상평 가이드 버튼이 키보드에 가려지는 문제 해결

2 participants